<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue.js 订单表单</title>
    <link rel="shortcut icon" href="../img/logo.png" type="image/x-icon" />
    <link rel="stylesheet" href="css/search.css">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <form id="main" v-cloak>

        <div class="bar">
            <!-- searchString 模型与文本域创建绑定 -->
            <input type="text" v-model="searchString" placeholder="输入搜索内容" />
        </div>
    
        <ul>
            <!-- 循环输出数据 -->
            <li v-for="article in filteredArticles">
                <a v-bind:href="article.url">
                    <img v-bind:src="article.image">
                    <p>{{article.title}}</p>
                </a>
            </li>
        </ul>
    </form>
    <script src="js/active.js"></script>
</body>

</html>